<template>
  <li
    :class="{
      tree_item: true,
      border_bottom: leval == 0
    }"
  >
    <div
      class="box"
      :style="{
        'padding-left': `${leval * 15 + 45}px`,
        'padding-right': `${boxPaddingRight}px`,
        'background': leval > 0 ? '#f4f7f9' : '#ffffff'
      }"
    >
      <span
        v-if="isFolder"
        :class="{
          folder: true,
          'folder-open': isOpen,
        }"
        @click="toggle(item)"
      ></span>
      <div
        :class="{ name: true, 'name-active': activeId == item[activeName] }"
        @click="changeActive(item[activeName], item)"
      >
        {{ item[name] }}
      </div>

      <div class="icon_wrap" v-if="action && !item.disabled">
        <el-tooltip content="查看" placement="top" :disabled="!detailBtn">
          <i v-if="detailBtn" @click="doAction('detail', item)" class="iconfont icon_detail"></i>
        </el-tooltip>
        <el-tooltip content="修改" placement="top" :disabled="!editBtn">
          <i v-if="editBtn" @click="doAction('edit', item)" class="iconfont icon_edit"></i>
        </el-tooltip>
        <el-tooltip content="删除" placement="top" :disabled="!deleteBtn">
          <i v-if="deleteBtn" @click="doAction('delete', item)" class="iconfont icon_delete"></i>
        </el-tooltip>
      </div>
    </div>
    <ul v-show="isOpen" v-if="isFolder">
      <TreeItem
        v-for="(child, index) in item[childrenName]"
        :key="index"
        :item="child"
        :leval="leval + 1"
        :activeId="activeId"
        :activeName="activeName"
        :name="name"
        :childrenName="childrenName"
        :action="action"
        :detailBtn="detailBtn"
        :editBtn="editBtn"
        :deleteBtn="deleteBtn"
        :current-level="item[childrenName]"
        :up-one-level="currentLevel"
      ></TreeItem>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'TreeItem',
  inject: ['treeRoot'],
  props: {
    item: Object,
    leval: Number,
    activeId: [Number, String],
    activeName: String,
    name: String,
    childrenName: String,
    action: Boolean,
    detailBtn: Boolean,
    editBtn: Boolean,
    deleteBtn: Boolean,
    currentLevel: Array,
    upOneLevel: Array
  },
  computed: {
    boxPaddingRight() {
      let pdr = 15;
      if (this.action && !this.item.disabled) {
        if (this.detailBtn) {
          pdr += 30;
        }
        if (this.editBtn) {
          pdr += 30;
        }
        if (this.deleteBtn) {
          pdr += 30;
        }
      }
      return pdr;
    },
    isFolder() {
      return this.item[this.childrenName] && this.item[this.childrenName].length;
    }
  },
  watch: {
    item: {
      handler(newVal) {
        if (newVal.isOpen != undefined) {
          this.isOpen = newVal.isOpen;
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggle(item) {
      if (this.isFolder) {
        this.isOpen = !this.isOpen;
        this.treeRoot.$emit('on-fold', item, this.isOpen);
      }
    },
    changeActive(active, item) {
      if (item.disabled) {
        this.toggle(item);
      } else {
        this.treeRoot.activeId = active;
        this.treeRoot.$emit('on-change', item);
      }
    },
    doAction(type, item) {
      this.treeRoot.$emit(type, {
        item,
        currentLevel: this.currentLevel,
        upOneLevel: this.upOneLevel
      });
    }
  }
};
</script>

<style lang="scss" scoped>
ul {
  padding: 0;
}
.tree_item {
  width: 100%;
  position: relative;
  list-style-type: none;
  &.border_bottom:last-child {
    border-bottom: 1px solid #d9d9d9;
  }
}
.box {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  padding: 8.5px 0;
  &:first-child {
    border-top: 1px solid #d9d9d9;
  }
  .folder {
    display: block;
    width: 20px;
    height: 20px;
    background: #e9edf0;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    margin-top: 1px;
    margin-left: -30px;
    &::before,
    &::after {
      content: "";
      display: block;
      width: 8px;
      height: 2px;
      background: $themeColor_IE;
      background: $themeColor;
      // background: #4e95ff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &::after {
      width: 2px;
      height: 8px;
    }
  }
  .folder-open {
    &::after {
      display: none;
    }
  }
  .name {
    font-size: 16px;
    line-height: 22px;
    color: #333333;
    user-select: none;
    cursor: pointer;
  }
  .name-active {
    color: $themeColor_IE;
    color: $themeColor;
    // color: #4e95ff;
  }
}
.icon_wrap {
  min-height: 22px;
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 15px;
  .iconfont {
    font-size: 20px;
    font-weight: 600;
    color: #999999;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
